<template>
    <div>
      <div style="display: flex;justify-content: space-between">
        <div>
          <el-input  prefix-icon="el-icon-search"
                    placeholder="请输入员工名进行搜索..."
                    v-model="searchValue.name"
                    @keydown.enter.native="initEmpsEc"
                    clearable
                    @clear="initEmpsEc"
                    style="width: 200px;"></el-input>
          <span style="margin-left: 10px">
            奖罚日期:
            <el-date-picker
              v-model="searchValue.beginDateScope"
              type="daterange"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </span>
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="initEmpsEc">搜索
          </el-button>
        </div>
      </div>
      <div style="margin-top: 10px">
        <el-table
          :data="empsEc"
          stripe
          border
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%">
          <el-table-column
            type="selection"
           >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            fixed
            align="left"
            >
          </el-table-column>
          <el-table-column
            prop="ecType"
            label="奖罚类别"
            align="left">
            <template slot-scope="scope">
              <div v-if="scope.row.ecType==0">
                奖
              </div>
              <div v-else>
                罚
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="ecPoint"
            label="分数"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.ecType==0">
                +{{scope.row.ecPoint}}
              </div>
              <div v-else>
                -{{scope.row.ecPoint}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="ecReason"
            label="奖罚原因"
           >
          </el-table-column>
          <el-table-column
            prop="ecDate"
            align="left"
            label="奖罚日期">
          </el-table-column>
          <el-table-column
           align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteEmpsEc(scope.row)" style="padding: 3px" size="mini"
                         type="danger">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: flex-end">
          <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes,prev,pager,next,jumper,->,total,slot" :total="total"></el-pagination>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "PerEc",
        data(){
          return{
            loading:false,
            total:0,
            empsEc:null,
            currentPage: 1,
            size: 10,
            searchValue:{
              name:'',
              beginDateScope:[]
            }
          }
        },
        create(){

        },
        mounted(){
          this.initEmpsEc();
        },
        methods:{
          sizeChange(currentSize) {
            this.size = currentSize;
            this.initEmps();
          },
          currentChange(currentPage) {
            this.currentPage = currentPage;
            this.initEmps();
          },
          initEmpsEc() {
            this.loading = true;
            let url = '/employee-ec/getEmployeeEcList/?currentPage=' + this.currentPage + '&size=' + this.size;
            if (this.searchValue.name) {
              url += '&name=' + this.searchValue.name;
            }
            if (this.searchValue.beginDateScope) {
              url += '&beginDateScope=' + this.searchValue.beginDateScope;
            }
            console.log(this.searchValue)
            this.getRequest(url).then(resp => {
              this.loading = false;
              if (resp) {
                console.log(resp)
                this.empsEc = resp.data;
                this.total = resp.total;
              }
            })
          },
          deleteEmpsEc(data){
            this.$confirm('此操作将永久删除该【' + data.name + '】, 的奖惩记录是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.deleteRequest('/employee-ec/delete/' + data.id).then(resp => {
                if (resp) {
                  this.initEmps();
                }
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        }
    }
</script>

<style scoped>

</style>
